<template>
  <div>
      <div>
          <el-input v-model="role.name">
              <template slot="prepend">
                  ROLE_ 
              </template>
          </el-input>
    </div>
    <div>
      <el-tree
        show-checkbox
        :data="allMenus"
        :props="defaultProps"
        :default-checked-keys="selectedMenus"
        node-key="id"
        ref="tree"
      >
<div style="display:felx;justif-content:flex-end">
  <el-button >取消</el-button>
  <el-button @click="doupdate(rid,index)">确认</el-button>
</div>
      </el-tree>
    </div>
    <div>
      
  </div>
  </div>
  
</template>

<script>
export default {
  data(){
    return{
      role:{
        name:'',
        nameZh:''
      },
      roles:[],
      allMenus:[],
      defaultProps:{
        children:'children',
        label:'name'
      },
      selectedMenus:[]
    }
  },
  mounted(){
    this.initRoles()
  },
  methods:{
    change(rid){
      if(rid){
        this.initAllMenus()
        this.selectedMenus(rid)
      }
    },
    doupdate(rid,index){
      let tree =  this.$refs.tree[index]
      let selectedKeys =  tree.getCheckedKeys()
      let url = 'url/?rid=' + rid
      selectedKeys.forEach(key =>{
        url += '&mids=' + key
      }) 
      this.putRequest(url).then(resp =>{
        if(resp){
          this.initRoles
        }
      })
    },
    //选中的角色调用接口
    initSelectedMenus(rid){
      this.getRequest('url',rid).then(resp =>{
        if(resp){
          this.selectedMenus = resp
        }
      })
    },
    doAddRole(){
      if(this.role.name && thie.role.nameZh){
        this.postRequest('url',this.role).then(resp =>{
          if(resp){
            this.initRoles()
          }
        })
      }
    },
    initAllMenus(){
      this.getRequest('url').then(resp=>{
        if(resp){
          this.allMenus = resp
        }
      })
    }
  }
}
</script>

<style>

</style>